<template>
	<view class="tabview">
		<view class="tabitem " :class="current==index?'tabactive':''" v-for="(item,index) in tablist" :key="index" @click="tabClick(item)">
			<image :src="item.iconPath" class="tabicon" mode=""></image>
			<image :src="item.selectedIconPath" class="tabicons" mode=""></image>
			<text>{{item.text}}</text>
		</view>
		<!-- <view>000</view> -->
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props: {
			current:{
				type: Number/String,
			},
		},
		data() {
			return {
				tablist: [
					{
						pagePath : "pages/tabbar/Tabhome", //页面路径，必须在 pages 中先定义
						iconPath : "/static/tabbar/hone.png", //建议尺寸为 81px * 81px
						selectedIconPath : "/static/tabbar/hones.png", //建议尺寸为 81px * 81px
						text : "首页", //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
						visible : true
					},
					{
						pagePath : "pages/tabbar/Shop", //页面路径，必须在 pages 中先定义
						iconPath : "/static/tabbar/htwo.png", //建议尺寸为 81px * 81px
						selectedIconPath : "/static/tabbar/htwos.png", //建议尺寸为 81px * 81px
						text : "商城", //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
						visible : true
					},
					{
						pagePath : "pages/tabbar/Studnt", //页面路径，必须在 pages 中先定义
						iconPath : "/static/tabbar/hthree.png", //建议尺寸为 81px * 81px
						selectedIconPath : "/static/tabbar/hthrees.png", //建议尺寸为 81px * 81px
						text : "学习", //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
						visible : true
					},
					{
						pagePath : "pages/tabbar/Tiku", //页面路径，必须在 pages 中先定义
						iconPath : "/static/tabbar/hfour.png", //建议尺寸为 81px * 81px
						selectedIconPath : "/static/tabbar/hfours.png", //建议尺寸为 81px * 81px
						text : "题库", //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
						visible : true
					},
					{
						pagePath : "pages/tabbar/My",
						iconPath : "/static/tabbar/hfive.png",
						selectedIconPath : "/static/tabbar/hfives.png",
						text : "我的",
						visible : true
					}
				],
				// current: 0
			};
		},
		methods: {
			tabClick(item){
				// console.log(item)
				uni.switchTab({ url: '/'+item.pagePath })
			}
		}
	}
</script>

<style lang="scss" scoped>

.tabview{
	position: fixed;
	z-index: 100000;
	height: 110rpx;
	background: #fff;
	box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(202,205,217,0.14);
	display: flex;
	bottom: 0;
	width: 100%;
	// padding-bottom: var(--window-bottom);
	.tabitem{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		.tabicon{
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 10rpx;
			display: inline-block;
		}
		text{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;
		}
		.tabicons{
			display: none;
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 10rpx;
		}
	}
	.tabactive{
		.tabicon{
			display: none;
		}
		.tabicons{
			display: inline-block;
		}
	}
}
</style>